<template>
    <div id="main" style="width: 600px; height: 400px; margin: 0 auto;"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts';
  import { onMounted, onUnmounted } from 'vue';
  import axios from 'axios';
  
  let myChart;
  let intervalId;
  
  onMounted(() => {
    const chartDom = document.getElementById('main');
    myChart = echarts.init(chartDom);
  
    // 初始数据
    const initialData = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'line'
        }
      ]
    };
  
    myChart.setOption(initialData);
  
    // 启动定时器，每隔1秒获取一次数据
    intervalId = setInterval(fetchData, 1000);
  });
  
  onUnmounted(() => {
    // 清除定时器
    clearInterval(intervalId);
  });
  
  const fetchData = async () => {
    try {
      const response = await axios.get('http://127.0.0.1:8000/app/data/'); // 替换为你的API地址
      const newData = response.data;
  
      // 更新图表数据
      myChart.setOption({
        series: [
          {
            data: newData.seriesData
          }
        ]
      });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };
  </script>
  
  <style scoped>
  #main {
    width: 600px;
    height: 400px;
    margin: 0 auto; /* 水平居中 */
    background-color: #f5f5f5; /* 背景颜色 */
    border: 1px solid #e0e0e0; /* 边框 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  }
  </style>